<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		
		<u-navbar
			title="基本信息"
			leftText="返回"
			bgColor="#ffffff"
			@leftClick="leftClick"
			:autoBack="false"
		>
		</u-navbar>
		
		
	    <view style="margin-top: 80px;padding: 20px 20px 0px 20px">
			<u-row>
				<u-col :span="10">
					头像
				</u-col>
				<u-col :span="2">
					<view class="myAvatar" :style="{backgroundImage: 'url(' + myInObj.userAvatar + ')'}" @click="updateImg">
					</view>
					
				</u-col>
			</u-row>
			
		</view>
		<u-line margin="15px 0"></u-line>
		
		<view style="padding: 0px 20px">
			<u-row>
				<u-col :span="9">
					用户名称
				</u-col>
				<u-col :span="3">
					<view style="float: right;min-width: 20px">
						<u--input
							placeholder="请输入"
							border="none"
							inputAlign="right"
							v-model="myInObj.userName"
							   clearable
							></u--input>
						</view>
				</u-col>
			</u-row>
			
		</view>
		<u-line margin="15px 0"></u-line>
		<view style="padding: 0px 20px">
			<u-row>
				<u-col :span="9">
					用户账号
				</u-col>
				<u-col :span="3">
					<view style="float: right;min-width: 20px">
						<u--input
							placeholder="请输入"
							border="none"
							inputAlign="right"
							v-model="myInObj.userAccount"
							   clearable
							></u--input>
						</view>
				</u-col>
			</u-row>
			
		</view>
		<u-line margin="15px 0"></u-line>
		
		<view style="padding: 0px 20px">
			<u-row>
				<u-col :span="7">
					手机号码
				</u-col>
				<u-col :span="5">
					<view style="float: right;min-width: 20px">
						<u--input
							placeholder="请输入"
							border="none"
							inputAlign="right"
							v-model="myInObj.phone"
							clearable
							></u--input>
						</view>
				</u-col>
			</u-row>
			
		</view>
		<u-line margin="15px 0"></u-line>
		
		
		<u-modal :show="downLoginShow" content='确认退出登录吗？' :showCancelButton='true' @confirm="downLogin" @cancel="downLoginShow = false"></u-modal>
		
		<view class="isjoin">
			<u-button type="primary" text="修改" @click="updateUser"></u-button>
			<u-button type="warning" text="退出登录" @click="downLoginShow = true"></u-button>
		</view>
	</view>
</template>

<script>
import { getUserByIdApi, updateUser } from '../../../utils/user'
import axios from 'axios'
	export default{
		data(){
			return{
				myInObj: {},
				downLoginShow: false,
			}
		},
		methods:{
			updateUser(){
				let that = this
				let userUpdateRequest = {
					phone: that.myInObj.phone,
					userAccount: that.myInObj.userAccount,
					userName: that.myInObj.userName,
					userAvatar: that.myInObj.userAvatar,
					id: that.myInObj.id,
				}
				console.log(userUpdateRequest)
				updateUser(userUpdateRequest).then(res => {
					if(res.code == 0){
						that.$refs.uToast.show({
							type: 'success',
							title: '修改成功',
							message: "修改成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
						
						that.$store.commit('setId',that.myInObj.id)
						that.$store.commit('setPhone',that.myInObj.phone)
						that.$store.commit('setUserAccount',that.myInObj.userAccount)
						that.$store.commit('setUserAvatar',that.myInObj.userAvatar)
						that.$store.commit('setUserName',that.myInObj.userName)
						that.$store.commit('setLogin',that.myInObj)
					}
				})
				
			},
			leftClick(){
				// #ifdef H5    
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {
					//重新定向跳转页面
					uni.reLaunch({
						url: '/pages/view/homepage/homepage'    
					})   
				}
				return;
				// #endif
				uni.navigateBack(1)
			},
			downLogin(){
				this.downLoginShow = false
				uni.removeStorage({
					key: 'userInfo'
				})
				uni.reLaunch({
				 url: "/pages/index/index"
				})
			},
			//http://localhost:8080/api/file/upload
			/*
			headers: {
			  'Content-Type': 'multipart/form-data'
			}
			*/
			updateImg(){
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						console.log(res)
						
						uni.uploadFile({
							url: 'http://121.37.0.16:8080/api/file/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data) );
								let a = JSON.parse(uploadFileRes.data)
								that.myInObj.userAvatar = 'http://121.37.0.16:9000/public/'+ a.data.fileName[0]
							}
							
						});
						
					}
		
				});
				
			}
		},
		// onShow() {
		// 	this.myInObj = uni.getStorageSync('userInfo')
		// }
		onLoad: function(option) {
			let that = this
			getUserByIdApi(option.id).then(res => {
				if(res.code == 0){
					console.log(res.data)
					that.myInObj = res.data
				}
			})
		}
	}
</script>

<style scoped>
	.isjoin{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		
		background-color: aliceblue;
	}
	.myAvatar{
		width: 100%;padding: 50% 0 50% 0;background-size: 100% 100%;
	}
</style>